<template>
  <!-- 小店详情-数据概览 159/161 -->
  <div class="dataGeneralization">
    <div class="vip_pay_box" v-if="!vipRootObj[159][161].owner">
      <div class="vip_bg_box">
        <div class="vip_bg_mask"></div>
      </div>
      <div class="vip_box_wrap">
        <payVip routerName="FansPortrait" :lowestVipNum="vipRootObj[159][161].ownerMinLevel" />
      </div>
    </div>
    <template v-else>
      <div class="top">
        <radio_group01 :radio_values="['近7天', '30天', '90天']" v-model="KindName" class="tab01" />
        <div class="optionsBox">
          <el-date-picker
            class="long_time"
            v-model="liveTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            prefix-icon="el-icon-arrow-down"
            unlink-panels
            :clearable="false"
            :picker-options="pickeroptions"
            value-format="yyyy-MM-dd"
            @change="onPick1"
          ></el-date-picker>
        </div>
      </div>
      <div class="title">基础数据</div>
      <div>
        <div class="ul1Box">
          <ul class="ul1" v-if="response02&&!loading">
            <li>
              <p v-if="response02&&response02.amount==0||response02&&response02.amount">
                {{
                format_num(response02.amount) === ""
                ? "--"
                : format_num(response02.amount)
                }}
              </p>
              <p v-else>--</p>
              <p>销售额</p>
            </li>
            <li>
              <p v-if="response02&&response02.volumeIncr==0||response02&&response02.volumeIncr">
                {{
                format_num(response02.volumeIncr) === ""
                ? "--"
                : format_num(response02.volumeIncr)
                }}
              </p>
              <p v-else>--</p>
              <p>销量</p>
            </li>
            <li>
              <p v-if="response02&&response02.extensionPro==0||response02&&response02.extensionPro">
                {{
                format_num(response02.extensionPro) === ""
                ? "--"
                : format_num(response02.extensionPro)
                }}
              </p>
              <p v-else>--</p>
              <p>推广商品数</p>
            </li>
            <li>
              <p
                v-if="response02&&response02.customerUnitPrice==0||response02&&response02.customerUnitPrice"
              >
                {{
                format_num(response02.customerUnitPrice) === ""
                ? "--"
                : format_num(response02.customerUnitPrice)
                }}
              </p>
              <p v-else>--</p>
              <p>客单价</p>
            </li>
            <!-- <li>
            <p v-if="response02&&response02.viewsIncr==0||response02&&response02.viewsIncr">
              {{
              format_num(response02.viewsIncr) === ""
              ? "--"
              : format_num(response02.viewsIncr)
              }}
            </p>
            <p v-else>--</p>
            <p>访客量</p>
            </li>-->
            <li>
              <p
                v-if="response02.conversionRatio<1"
              >{{response02.conversionRatio?(response02.conversionRatio*100).toFixed(1)+'%':0}}</p>
              <p v-else>--</p>
              <p>转化率</p>
            </li>
            <li>
              <p
                v-if="response02.commissionRate<1"
              >{{response02.commissionRate*100?(response02.commissionRate*100).toFixed(2)+'%':0}}</p>
              <p v-else>--</p>
              <p>佣金率</p>
            </li>
          </ul>

          <div
            v-loading="loading"
            v-if="loading"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
        </div>
        <div class="title">关联数据</div>
        <div class="ul2Box">
          <ul class="ul2" v-if="response02&&!loading">
            <li>
              <p v-if="response02.associatedAuthor==0||response02.associatedAuthor">
                {{
                format_num(response02.associatedAuthor)
                }}
              </p>
              <p v-else>--</p>
              <p>关联达人数</p>
            </li>
            <li>
              <p v-if="response02.associatedVideo==0||response02.associatedVideo">
                {{
                format_num(response02.associatedVideo)
                }}
              </p>
              <p v-else>--</p>
              <p>关联视频数</p>
            </li>
            <li>
              <p v-if="response02.associatedVideo==0||response02.associatedVideo">
                {{
                format_num(response02.associatedlive)
                }}
              </p>
              <p v-else>--</p>
              <p>关联直播数</p>
            </li>
          </ul>
          <div
            v-loading="loading"
            v-if="loading"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
        </div>
      </div>

      <div class="chart_box">
        <div>
          <p class="title">销量趋势</p>
          <div>
            <lineChart
              :xData="volumeX"
              :series1="volumeY"
              name1="销量"
              v-if="volumeX.length && volumeY.length"
            />
            <div
              v-loading="loading1"
              v-if="loading1"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div class="zw" v-if="!loading1&&!volumeX.length">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
          </div>
        </div>
        <div>
          <p class="title">销售额趋势</p>
          <div>
            <lineChart
              :xData="amountX"
              :series1="amountY"
              name1="销售额"
              v-if="amountX.length && amountY.length"
            />
            <div
              v-loading="loading1"
              v-if="loading1"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div class="zw" v-if="!loading1&&!amountX.length && !amountY.length">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
          </div>
        </div>
      </div>
      <div class="chart_box">
        <div>
          <p class="title">商品品类分布TOP5</p>
          <div>
            <BigPie :valueData="pie_data01" v-if="pie_data01 && pie_data01.length" />
            <div
              v-loading="loading2"
              v-if="loading2"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div class="zw" v-if="!loading2&&!pie_data01.length">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
          </div>
        </div>
        <div>
          <p class="title">商品价格区间分布</p>
          <div>
            <BigPie :valueData="pie_data02" v-if="pie_data02 && pie_data02.length" />
            <div
              v-loading="loading3"
              v-if="loading3"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div class="zw" v-if="!loading3&&!pie_data02.length">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
          </div>
        </div>
      </div>
      <div class="chart_box">
        <div>
          <p class="title">达人直播销量占比</p>
          <div>
            <BigPie :valueData="pie_data03" v-if="pie_data03.length" />
            <div
              v-loading="loading4"
              v-if="loading4"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div class="zw" v-if="!loading4&&!pie_data03.length">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
          </div>
        </div>
        <div>
          <p class="title">达人行业占比TOP5</p>
          <div>
            <BigPie :valueData="pie_data04" v-if="pie_data04.length" />
            <div
              v-loading="loading5"
              v-if="loading5"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
            ></div>
            <div class="zw" v-if="!loading5&&!pie_data04.length">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import lineChart from '../topicDetails/KChart.vue'; //折线图
import BigPie from '@/pages/wang/talent/tdetails/component/BigPie'; //饼状图
export default {
  props: [],
  data() {
    return {
      pie_data01: [],
      pie_data02: [],
      pie_data03: [],
      pie_data04: [],
      volumeX: [], //销量
      volumeY: [], //销量
      amountX: [], //销售额
      amountY: [], //销售额
      loading: false,
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      response02: null,
      KindName: '30天',
      liveTime: [],
      startDate: '',
      endDate: '',
      keyWords: '',
      // 选择时间 不可选的日期.
      pickeroptions: {
        disabledDate: time => {
          return (
            time.getTime() < Date.now() - 180 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now() - 24 * 60 * 60 * 1000
          ); // 返回 所有时间 大于 当前时间
        }
      },
      vipRootObj: this.$store.state.userRoot //会员权限对象
    };
  },
  components: { lineChart, BigPie },
  computed: {},
  created() {
    this.get_data_left02();
    this.infodatatrend();
    this.infodatacategory();
    this.infodataprice();
    if (this.vipRootObj[159][161].owner) {
      this.infodataauthorvolume();
    }
    this.infodataauthorindustry();
  },
  mounted() {},
  watch: {
    KindName: function (newVal, oldVal) {
      // this.infodata = [];
      if (this.KindName != '') {
        this.KindName = newVal;
        this.get_data_left02();
        this.infodatatrend();
        this.infodatacategory();
        this.infodataprice();
        this.infodataauthorvolume();
        this.infodataauthorindustry();
      }
    }
  },
  methods: {
    //小店详情-数据概览-达人行业占比
    infodataauthorindustry() {
      this.pie_data04 = [];
      this.loading5 = true;
      this.getTime();
      this.$axios
        .post('/api/shop/infodataauthorindustry', {
          ShopID: this.$route.params.id, //店铺ID
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate //结束时间
        })
        .then(res => {
          this.loading5 = false;
          if (res.data.code == 0) {
            this.pie_data04 = res.data.data;
          }
        });
    },
    // 小店详情-数据概览-达人直播销量占比
    infodataauthorvolume() {
      this.loading4 = true;
      this.pie_data03 = [];
      this.getTime();
      this.$axios
        .post('/api/shop/infodataauthorvolume', {
          ShopID: this.$route.params.id, //店铺ID
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate //结束时间
        })
        .then(res => {
          this.loading4 = false;
          if (res.data.code == 0) {
            let arrData = JSON.parse(JSON.stringify(res.data.data));
            let num = 0;
            for (let i = arrData.length - 1; i >= 0; i--) {
              if (arrData[i].value == 0) {
                arrData.splice(i, 1);
              }
            }
            this.pie_data03 = arrData;
          }
        });
    },
    // 小店详情-数据概览-商品价格分布
    infodataprice() {
      this.pie_data02 = [];
      this.loading3 = true;
      this.getTime();
      this.$axios
        .post('/api/shop/infodataprice', {
          ShopID: this.$route.params.id, //店铺ID
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate //结束时间
        })
        .then(res => {
          this.loading3 = false;
          if (res.data.code == 0) {
            res.data.data.forEach((element, i) => {
              if (element.value == 0) {
                res.data.data.splice(i, 1);
              }
            });
            this.pie_data02 = res.data.data;
          }
        });
    },
    // 小店详情-数据概览-商品分类分布(黄旭东)
    infodatacategory() {
      this.pie_data01 = [];
      this.loading2 = true;
      this.getTime();
      this.$axios
        .post('/api/shop/infodatacategory', {
          ShopID: this.$route.params.id, //店铺ID
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate //结束时间
        })
        .then(res => {
          this.loading2 = false;
          if (res.data.code == 0) {
            res.data.data.forEach((element, i) => {
              if (element.value == 0) {
                res.data.data.splice(i, 1);
              }
            });

            this.pie_data01 = res.data.data;
          }
        });
    },
    // 小店详情-数据概览-趋势图
    infodatatrend() {
      this.volumeX = [];
      this.volumeY = [];
      this.amountX = [];
      this.amountY = [];
      this.loading1 = true;
      this.getTime();
      this.$axios
        .post('/api/shop/infodatatrend', {
          ShopID: this.$route.params.id, //店铺ID
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate //结束时间
        })
        .then(res => {
          this.loading1 = false;
          if (res.data.code == 0) {
            this.volumeX = res.data.data.volumeX;
            this.volumeY = res.data.data.volumeY;
            this.amountX = res.data.data.amountX;
            this.amountY = res.data.data.amountY;
          }
        });
    },
    // 基础数据
    get_data_left02() {
      this.response02 = [];
      this.getTime();
      let that = this;
      that.loading = true;
      return this.$axios
        .post('/api/shop/infodata?api-version=2', {
          // shopId: that.id
          ShopID: this.$route.params.id,
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate
        })
        .then(response => {
          that.loading = false;
          if (response.data.code == 0) {
            this.response02 = response.data.data;
            // console.log(this.response02);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    onPick1() {
      this.KindName = '';
      this.get_data_left02();
      this.infodatatrend();
      this.infodatacategory();
      this.infodataprice();
      this.infodataauthorvolume();
      this.infodataauthorindustry();
    },
    getTime() {
      this.listLoading = true;
      switch (this.KindName) {
        case '近7天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 7, 'Y-M-D');
          break;

        case '30天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 30, 'Y-M-D');
          break;
        case '90天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 90, 'Y-M-D');
          break;
        default:
          this.startDate = this.liveTime[0];
          this.endDate = this.liveTime[1];
          break;
      }
      this.liveTime = [this.startDate, this.endDate];
    }
  }
};
</script>

<style lang="less" scoped>
.dataGeneralization {
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  box-sizing: border-box;

  .top {
    margin-bottom: 10px;
    // width: 100%;
    display: flex;
    justify-content: flex-end;
    .optionsBox {
      margin-left: 10px;
    }
  }
  .title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0px;
    color: #222222;
    position: relative;
    text-indent: 9px;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 16px;
      background-color: #fd7f2c;
      border-radius: 2px;
    }
  }

  .ul1 {
    display: flex;
    // justify-content: center;
    margin-left: 10%;
    height: 100%;

    li {
      align-self: center;
      width: 12%;
      text-align: center;
      &:nth-child(2),
      &:nth-child(4) {
        border-right: 1px solid #efefef;
      }
      p {
        &:nth-child(1) {
          font-family: DINAlternate-Bold;
          font-size: 24px;
          color: #222222;
          line-height: 31px;
          height: 31px;
          // white-space: nowrap;
        }
        &:nth-child(2) {
          font-size: 12px;
          color: #888888;
        }
      }
    }
  }
  .ul1Box {
    height: 120px;
  }
  .ul2Box {
    height: 128px;
  }
  .ul2 {
    display: flex;
    padding-left: 10%;
    height: 128px;
    li {
      align-self: center;
      width: 25%;
      text-align: center;
      p {
        &:nth-child(1) {
          font-family: DINAlternate-Bold;
          height: 31px;
          line-height: 31px;
          font-size: 24px;
          color: #222222;
        }
        &:nth-child(2) {
          font-size: 12px;
          color: #888888;
        }
      }
    }
  }
  .chart_box {
    display: flex;

    > div {
      width: 100%;

      > div {
        position: relative;
        height: 260px;
        padding-top: 40px;
        width: 95%;
        margin-bottom: 40px;
      }
    }
  }
}
@media screen and (max-width: 1400px) {
  .ul1Box {
    padding: 40px 0;
    // height: 180px !important;
  }
  .ul1 {
    flex-wrap: wrap;

    li {
      width: 20% !important;
      margin-top: 12px;
      &:nth-child(1) {
        margin-left: 0 !important;
      }
      // padding-top: 18px !important;
    }
    // &:nth-child(5) {
    //   // margin-left: 19.9%;
    // }
  }
}
</style>
